<template>
  <!-- "touchstart" 当手指触摸屏幕时候触发  "touchend"  当手指从屏幕上离开的时候触发  "capture" 用于事件捕获-->
  <div
    class="li_vessel"
    v-for="(item, index) in data"
    :key="index"
    data-type="0"
    @click="toChat(item)"
  >
    <div
      class="chat-list"
      @touchstart.capture="touchStart"
      @touchend.capture="touchEnd"
      @click="oneself"
    >
      <div class="photo">
        <img :src="item.avatar" alt />
      </div>
      <div class="content">
        <div>
          <span class="content_nickname">{{ item.name }}</span>
          <span class="content_time">{{ item.time }}</span>
        </div>
        <span class="content_word">{{ item.word }}</span>
      </div>
    </div>
    <div class="removeBtn" @click="remove" :data-index="index">删除</div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "ChatChild",
  props: {
    data: {
      type: Array,
    },
  },
  setup() {
    const router = useRouter();
    let lists = reactive([]);
    let startX = ref(0); //滑动开始
    let endX = ref(0); //滑动结束

    //向左滑动出现删除按钮时，点击商品信息区域取消删除
    const oneself = () => {
      if (checkSlide()) {
        restSlide();
      } else {
        // 点击商品信息弹出弹框
        console.log("点击当前商品触发事件...");
      }
    };
    //滑动开始
    const touchStart = (e) => {
      // 记录初始位置
      startX.value = e.touches[0].clientX;
    };
    //滑动结束
    const touchEnd = (e) => {
      // 当前滑动的父级元素
      let parentElement = e.currentTarget.parentElement;
      // 记录结束位置
      endX.value = e.changedTouches[0].clientX;
      // 左滑大于30距离删除出现
      if (parentElement.dataset.type == 0 && startX.value - endX.value > 30) {
        restSlide();
        parentElement.dataset.type = 1;
      }
      // 右滑
      if (parentElement.dataset.type == 1 && startX.value - endX.value < -30) {
        restSlide();
        parentElement.dataset.type = 0;
      }
      startX.value = 0;
      endX.value = 0;
    };
    //判断当前是否有滑块处于滑动状态
    const checkSlide = () => {
      let listItems = document.querySelectorAll(".li_vessel");
      for (let i = 0; i < listItems.length; i++) {
        if (listItems[i].dataset.type == 1) {
          return true;
        }
      }
      return false;
    };
    //复位滑动状态
    const restSlide = () => {
      let listItems = document.querySelectorAll(".li_vessel");
      // 复位
      for (let i = 0; i < listItems.length; i++) {
        listItems[i].dataset.type = 0;
      }
    };
    //删除数据信息
    const remove = (e) => {
      // 当前索引值
      let index = e.currentTarget.dataset.index;
      // 复位
      restSlide();
      // 删除数组lists中一个数据
      lists.splice(index, 1);
    };
    //点击某一项 前去聊天界面
    const toChat = (item) => {
      router.push({
        name: "chatDetail",
        params: {
          id: item.id,
          name: item.name,
          avatar: item.avatar,
          word: item.word,
          type: item.type,
        },
      });
    };
    return {
      touchStart,
      touchEnd,
      oneself,
      remove,
      toChat,
    };
  },
};
</script>
<style lang="scss">
.removeBtn {
  width: 1.3rem;
  height: 1.3rem;
  background: $background_color3;
  font-size: $font-size-24;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0px;
  right: -1.31rem;
  line-height: 1.3rem;
  text-align: center;
  border-radius: 0.02rem;
}

/* =0隐藏 */
.li_vessel[data-type="0"] {
  transform: translate3d(0, 0, 0);
}

.li_vessel {
  /* 全部样式 0.2秒 缓动*/
  transition: all 0.2s;
  width: 100vw;
}

/* =1显示 */
.li_vessel[data-type="1"] {
  /* -64px 设置的越大可以左滑的距离越远，最好与下面删除按钮的宽度以及定位的距离设置一样的值*/
  transform: translate3d(-1.3rem, 0, 0);
}
</style>
